<template>
    <el-main class="main">

      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="称呼"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="tel"
        label="手机"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="qq"
        label="QQ"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="提交时间"
        align="center"
        >
      </el-table-column>
    </el-table>

  <el-pagination
  background
  layout="prev, pager, next"
  :total="total"
      @current-change="currentChange"
    align="center"
    class="fenye"
  >
</el-pagination>

    </el-main>
  </template>

  <script>
  import request from '@/utils/request'
    export default {
      data() {
        return {
          tableData: [],
          total: 1,
          page: 1
        }
      },

      created() {
      this.getData(1)
  },
   methods: {
   
    currentChange(currentPage) {
      // 修改当前页
      this.page = currentPage
      // 请求数据
      this.getData(this.page)
    },

    getData(page) {
      // banner 列表数据
      request({
        url: '/records', 
        method: 'get', 
        params: {'page': page}
      }).then(res => {
      this.tableData = res.data.data
      this.total = res.data.total
    })
    }
  }
    }
    
  </script>

  <style>
  .main {
    padding: 50px;
  }
  .fenye {
    margin-top: 20px; 
  }
  </style>
  